<template>
  <div class="dashboard-container">
    <!-- 卡片区域区域 -->
    <el-card>
      <!-- alert区域 -->
      <el-row>
        <el-alert :title="'一共' + total+ '条记录'" type="info" show-icon :closable='false'>
        </el-alert>
      </el-row>

      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" border stripe v-loading="loading">
        <el-table-column prop="type" label="操作类型">
        </el-table-column>
        <el-table-column prop="author" label="操作人">
        </el-table-column>
        <el-table-column prop="title" label="执行结果">
        </el-table-column>
        <el-table-column prop="display_time" label="操作时间">
        </el-table-column>
        <el-table-column prop="forecast" label="描述">
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="querinfo.page" :page-sizes="[10, 15, 20, 25]" :page-size="querinfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list } from '../../api/example/table'
export default {
  data () {
    return {
      querinfo: {
        page: 1,
        limit: 20
      },
      list: [], // 数据列表
      total: 0,
      loading: true
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    //  发起数据请求 获取数据
    async getlist () {
      const { data: res } = await list(this.querinfo)
      console.log(res)
      this.$message.success('获取数据列表成功')
      this.list = res.items
      this.total = res.total
      this.loading = false
      console.log(this.list)
    },

    // 一页显示多少条数据
    handleSizeChange (newnum) {
      this.querinfo.limit = newnum
      this.getlist()
    },
    handleCurrentChange (newsize) {
      this.querinfo.page = newsize
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
